<template>
  <div class="getPassword">
    <nav-bar :title="'修改密码'"></nav-bar>
    <div class="title-top">修改密码</div>
    <div class="getPassword-content">
      <van-form @submit="onSubmit" label-align="right">
        <van-field
          v-model="form.phoneNumber"
          name="form.phoneNumber"
          label="手机号"
          placeholder="请输入手机号"
          :rules="[{ required: true, message: '手机号不能为空' }]"
        />
        <van-field
          name="form.code"
          v-model="form.code"
          label="短信验证码"
          placeholder="请输入短信验证码"
        >
          <template #button>
            <span
              size="small"
              type="primary"
              v-show="showCodeButton"
              class="get-captcha"
              @click="getCode()"
              >发送验证码</span
            >
            <span v-show="!showCodeButton" class="get-captcha"
              >发送中{{ time }}</span
            >
          </template>
        </van-field>
        <van-field
          v-model="form.password"
          name="form.password"
          label="新密码"
          placeholder="请输入新密码"
          :rules="[{ required: true, message: '新密码不能为空' }]"
        />
        <!-- <div class="loginBtn" @click="onSubmit">登录</div> -->
        <div style="margin: 40px">
          <van-button
            color="#0050A5"
            class="reg-box-btn"
            round
            block
            type="info"
            native-type="submit"
            >登 录</van-button
          >
        </div>
      </van-form>
      <!-- <validation-observer ref="observer">
        <validation-provider rules="required|phone" name="phone" v-slot="{errors}">
          <div class="getPassword-input">
            <span class="star">*</span>
            <span class="label">用户手机</span>
            <input type="text" v-model="form.phoneNumber" placeholder="请输入用户注册手机号" />
            <span class="error">{{errors[0]}}</span>
          </div>
        </validation-provider>
        <validation-provider rules="required|length:6|integer" name="captcha" v-slot="{errors}">
          <div class="getPassword-content-captcha getPassword-input">
            <span class="star">*</span>
            <span class="label">验证码</span>
            <input type="text" v-model="form.code" placeholder="请输入验证码" />
            <div v-show="showCodeButton" @click="getCode()" class="send-captcha">发送验证码</div>
            <div v-show="!showCodeButton" class="send-captcha">发送中{{time}}</div>
            <span class="error">{{errors[0]}}</span>
          </div>
        </validation-provider>
        <validation-provider rules="required|min:6" name="newPassword" v-slot="{errors}">
          <div class="getPassword-input">
            <span class="star">*</span>
            <span class="label">新密码</span>
            <input type="password" v-model="form.password" placeholder="请输入您的新密码" />
            <span class="error">{{errors[0]}}</span>
          </div>
        </validation-provider>
      </validation-observer>-->
    </div>
    <!-- <div class="getPassword-btn" @click="onSubmit()">提交</div> -->
  </div>
</template>

<script>
// import { ValidationProvider } from 'vee-validate'
// import { ValidationObserver } from 'vee-validate'
import navBar from "@/components/NavBar";
export default {
  name: "GetPassword",
  components: {
    // ValidationProvider,
    // ValidationObserver,
    navBar,
  },
  data() {
    return {
      form: {},
      codeImg: "",
      showCodeButton: true,
      time: 60,
    };
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    onSubmit() {
      // this.$refs.observer.validate().then((valid) => {
      //   if (true === valid) {
      this.$request({
        url: "/oauth/updatePassword",
        data: this.form,
        method: "post",
      }).then((rsp) => {
        if (rsp.code === 200) {
          this.$toast.success("修改成功!");
          this.$router.back(-1);
        } else {
          this.$toast.fail(rsp.content);
        }
      });
      //   }
      // })
    },
    getCode() {
      if (!this.form.phoneNumber) {
        this.$toast.fail("请填写手机号!");
        return false;
      }
      this.form.timestamp = new Date().getTime();
      this.$request({
        url: "/code/shortMessage",
        data: {
          phoneNumber: this.form.phoneNumber,
          timestamp: this.form.timestamp,
        },
        method: "post",
      }).then((rsp) => {
        if (rsp.code === 200) {
          this.showCodeButton = false;
          this.countdown();
        } else {
          this.$toast.fail(rsp.content);
        }
      });
    },
    countdown() {
      if (!this.showCodeButton) {
        if (this.time > 0) {
          setTimeout(() => {
            this.time--;
            this.countdown();
          }, 1000);
        } else {
          this.showCodeButton = true;
          this.time = 60;
        }
      }
    },
  },
};
</script>

<style lang='scss'>
.getPassword {
  .title-top {
    color: #333333;
    font-size: px2rem(48);
    font-weight: bold;
    text-align: center;
    margin: px2rem(50) auto;
  }
  &-content {
    // width: px2rem(600);
    // margin: px2rem(190) auto 0;
    font-size: px2rem(24);

    // input {
    //   display: block;
    //   width: px2rem(400);
    //   height: px2rem(54);
    //   font-size: px2rem(24);
    //   padding-left: px2rem(14);
    //   box-sizing: border-box;
    //   line-height: px2rem(54);
    //   border: px2rem(1) solid rgba(191, 191, 191, 0.5);
    // }
    .getPassword-input {
      // margin-bottom: px2rem(34);
      display: flex;
      flex-wrap: wrap;
      line-height: px2rem(54);
      height: px2rem(110);
      .star {
        font-size: px2rem(20);
        font-weight: 400;
        color: rgba(255, 0, 0, 1);
      }
      .label {
        display: block;
        width: px2rem(100);
        font-size: px2rem(20);
        font-weight: 400;
        color: rgba(0, 0, 0, 1);
        margin-left: px2rem(10);
        margin-right: px2rem(20);
      }
    }
    .get-captcha {
      color: #0050a5;
    }
    &-captcha {
      input {
        width: px2rem(238);
        height: px2rem(58);
        font-size: px2rem(24);
      }
      .send-captcha {
        width: px2rem(160);
        height: px2rem(58);
        background: rgba(0, 80, 165, 1);
        line-height: px2rem(58);
        text-align: center;
        color: #ffffff;
        font-size: px2rem(20);
      }
    }
  }
  &-btn {
    width: px2rem(600);
    background: rgba(0, 80, 165, 1);
    margin: px2rem(60) auto px2rem(80);
    height: px2rem(70);
    line-height: px2rem(70);
    text-align: center;
    color: #ffffff;
    font-size: px2rem(28);
  }
}
</style>
